<template>
  <transition name="fade">
    <div class="layui-layer-page layui-layer-prompt edit-content" v-show="isShow">
      <div class="layui-layer-title">请输入引用内容</div>
      <div class="layui-layer-content">
        <textarea type="text" class="layui-textarea" id="quoteInput" v-model="quote"></textarea>
      </div>
      <span class="layui-layer-setwin" @click.stop="close()">
        <a href="javascript:void(0)" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
      </span>
      <div class="layui-layer-btn">
        <a class="layui-layer-btn0" @click.prevent="submit()">确定</a>
        <a class="layui-layer-btn" @click.prevent="close()">取消</a>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'quote-add',
  props: ['isShow'],
  data () {
    return {
      quote: ''
    }
  },
  methods: {
    close () {
      this.$emit('cancel')
    },
    submit () {
      if (!this.quote) {
        this.$pop('shake', '请先添加引用内容再进行该操作')
        document.getElementById('quoteInput').focus()
        return
      }
      this.$emit('clickEvent', this.quote)
      setTimeout(() => {
        this.quote = ''
        this.close()
      }, 0)
    }
  }
}
</script>

<style lang="scss" scoped>
.layui-textarea{
  width: 300px;
}
</style>
